import React from 'react'
import PropTypes from 'prop-types'

import { Top10Wrap,SubTitle } from './StyledCookBook'

const Top10 = (props) => {
  return (
    <Top10Wrap>
      <h1>热门菜品</h1>
      <ul>
        {
          props.list.size > 0 && props.list.map(item => {
            return (
              <li 
                key={item.id}
                onClick={props.onGotoDetail(item.name)}
                >
                <div>
                  <img src={item.img} alt="" />
                </div>
                <div>
                  <p>{item.name}</p>
                  <SubTitle><span>{item.all_click}浏览</span><span>{item.favorites}收藏</span></SubTitle>
                </div>
              </li>
            )
          })
        }
      </ul>
    </Top10Wrap>
  )
}

Top10.propTypes = {
  list: PropTypes.object
}


export default Top10